<script setup>
import { ref, onMounted } from 'vue';
import eventBus from 'vue3-eventbus';

// 接收玩家数据和动画参数
const props = defineProps({
    playerName: {
        type: String,
        default: '张三'
    },
    playerAvatar: {
        type: String,
        default: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    },
    playerLevel: {
        type: Number,
        default: 1
    },
    playerScore: {
        type: Number,
        default: 0
    },
    startPoint: {
        type: Object,
        default: () => ({ x: 240, y: 210 })
    },
    endPoint: {
        type: Object,
        default: () => ({ x: 190, y: 120 })
    },
    duration: {
        type: Number,
        default: 2
    },
    stayDuration: {
        type: Number,
        default: 7.5
    },
    initialScale: {
        type: Number,
        default: 0.5
    }
});

// 动画状态
const currentPosition = ref({ ...props.startPoint }); // 当前坐标
const currentScale = ref(props.initialScale); // 当前缩放比例
const currentDuration = ref(props.duration); // 当前过渡时长
const currentOpacity = ref(0); // 当前透明度（初始隐藏）

// 触发动画
const startAnimation = () => {
    // 确保坐标在边界内
    const maxWidth = 1312 - 130; // video-container 宽度 - player-card 宽度
    const maxHeight = window.innerHeight - 50; // 视口高度 - player-card 高度
    currentDuration.value = props.duration; // 恢复动画时长
    currentPosition.value = {
        x: Math.max(0, Math.min(props.endPoint.x, maxWidth)),
        y: Math.max(0, Math.min(props.endPoint.y, maxHeight))
    };
    currentScale.value = 1; // 缩放到正常大小
    currentOpacity.value = 1; // 显示
};

// 重置到起始点和初始尺寸（无动画）
const resetAnimation = () => {
    currentDuration.value = 0; // 禁用过渡
    currentPosition.value = { ...props.startPoint };
    currentScale.value = props.initialScale; // 恢复初始尺寸
    currentOpacity.value = 0; // 隐藏
};

onMounted(() => {
    eventBus.on('start-animation', startAnimation);
    eventBus.on('reset-animation', resetAnimation);
})
</script>

<template>
    <div
        class="player-card"
        :style="{
            left: `${currentPosition.x}%`,
            top: `${currentPosition.y}%`,
            transform: `scale(${currentScale})`,
            opacity: currentOpacity,
            transition: `all ${currentDuration}s linear`
        }"
    >
        <div class="player-avatar">
            <img :src="props.playerAvatar" alt="玩家头像">
        </div>
        <div class="player-info">
            <div class="player-name">{{ props.playerName }}</div>
            <div class="player-score">分数: {{ props.playerScore }}</div>
        </div>
    </div>
</template>

<style lang="less">
.player-card {
    position: absolute;
    z-index: 100;
    display: flex;
    align-items: center;
    background: rgba(43, 88, 118, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: white;
    width: 130px;
    transform-origin: center; /* 缩放以中心为基准 */
    .player-avatar {
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.8);
        }
    }
    .player-info {
        flex: 1;
        .player-name {
            font-size: 13px;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }
        .player-score {
            font-size: 9px;
            opacity: 0.95;
            background: rgba(255, 255, 255, 0.1);
            padding: 2px 4px;
            border-radius: 4px;
            display: inline-block;
        }
    }
}
</style>